{template 'common/header'}
<link href="{MODULE_URL}template/web/css/menudesign.css" rel="stylesheet" type="text/css">
<div class="mii-menu">
	<ul>
		<li >
			<a href="{php echo $this->createWebUrl('setmenu');}">首页菜单</a>
		</li>
		<li class="active">
			<a href="{php echo $this->createWebUrl('setbottommenu');}">底部菜单</a>
		</li>
	</ul>	
</div>
<div class="designbox">
	 <div class="menlistbox">
	 	<div class="pic-box-bottom">
		 	<div class="pic-box-normal" onclick="showImageDialogs(this);" style="margin-top: 15px;">
		 		<img  id="showImg" src="{MODULE_URL}public/img/nopic.png">
		 		<input type="hidden" id="menuimg" name="menuimg" value="">
		 		<div class="title">正常图标</div>
		 	</div>
		 	<div class="pic-box-active" onclick="showImageDialogsAndselect(this);" style="margin-top: 15px;">
		 		<img  id="showImages" src="{MODULE_URL}public/img/nopic.png">
		 		<input type="hidden" id="menuimgs" name="menuimgs" value="">
		 		<div class="title">选中图标</div>
		 	</div>	
	 	</div> 	
	 	<!-- 右 -->
	 	<div class="input-box">
	 		<div class="input-list">
	 			<div class="form-group">
		 			<label class="col-sm-3 control-label">菜单名称</label>
		 			<div class="col-sm-8">
						<input type="text" class="form-control" id="menuname" name="menuname" value="">
					</div>
				</div>
	 		</div>
	 		<div class="input-list">	
	 			<div class="form-group">
		 			<label class="col-sm-3 control-label">选择连接</label>
		 			<div class="col-sm-8">
					    <div class="sobox">
					    	<div class="col-sm-8" style="padding-left: 0px; padding-right: 0px;">
					    		<input type="text" id="menuurl"  name="menuurl" class="form-control" placeholder="请选择连接" value="">
					    		<input type="hidden" name="classid" class="classid" value="">
					    	</div>
					        <button style="margin-left: 10px;" type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">选择连接<span class="caret"></span></button>
					        <ul class="dropdown-menu dropdown-menu-right">
					          <li><a onclick="geturl(this);" mid="{$o['id']}" data-href="/mii_ang/pages/index/index" data-type="">首页</a></li>
					          <li role="separator" class="divider"></li>					        	
					          <li><a id="classselect" mid="{$o['id']}" data-href="" data-type="" data-title="选择连接分类" data-multiple="true" data-maxnum="1" data-width="582">服务分类</a></li>
					          <li role="separator" class="divider"></li> 
					          <li><a id="goodsselect" mid="{$o['id']}" data-href="" data-type="" data-title="选择连接服务产品" data-multiple="true" data-maxnum="1" data-width="582">服务产品</a></li>
					          <li role="separator" class="divider"></li> 
					          <li><a onclick="geturl(this);" mid="{$o['id']}" data-href="/mii_ang/pages/personal/index" data-type="">个人中心</a></li>
					          <li role="separator" class="divider"></li>
					          <li><a onclick="geturl(this);" mid="{$o['id']}" data-href="/mii_ang/pages/tech/index" data-type="">服务人员列表</a></li>
					          <li role="separator" class="divider"></li> 					           
					          <li><a onclick="geturl(this);" mid="{$o['id']}" data-href="/mii_ang/pages/card/card" data-type="">卡券中心</a></li>
					          <li role="separator" class="divider"></li> 
					          <li><a onclick="geturl(this);" mid="{$o['id']}"  data-href="/mii_ang/pages/about/index" data-type="">关于我们</a></li>
					          <li role="separator" class="divider"></li>
					          <li><a onclick="geturl(this);" mid="{$o['id']}"  data-href="/mii_ang/pages/membercard/index" data-type="">会员卡</a></li>
					          <li role="separator" class="divider"></li> 
					          <li><a onclick="geturl(this);" mid="{$o['id']}"  data-href="/mii_ang/pages/buy/index" data-type="">在线买单</a></li>
					          <li role="separator" class="divider"></li> 					            
					        </ul>
					    </div>		 				
		 			</div>
				</div>	 			
	 		</div>
	 		<div class="input-list">
	 			<div class="form-group">	
		 			<label class="col-sm-3 control-label">字体颜色</label>
					{php echo tpl_form_field_color('font_color','');}	
				</div>	 			
	 		</div>
	 		<div class="input-list">
	 			<div class="form-group">	
		 			<label class="col-sm-3 control-label">选中颜色</label>
					{php echo tpl_form_field_color('selectfont_color','');}	
				</div>	 			
	 		</div>
	 		<div class="input-list">
	 			<div class="form-group">	
		 			<label class="col-sm-3 control-label">菜单排序</label>
		 			<div class="col-sm-8">
					<input type="number" class="form-control" id="orderid" name="orderid" value="" placeholder="数值越大越靠前">	
					</div>
				</div>	 			
	 		</div>		 		

	 	</div>
<!-- 	 	<div class="men-box edit">
			<div class="list_right btn">
                <a class="green editbtn save" uid="{$o['uid']}">保存</a>
            </div>	 			
	 	</div> -->
	 	<div class="cl"></div>
	 </div>

<button id="_save" class="save">保存</button>

</div>
<style type="text/css">
.list_nav{
	float: left;
}
.save{
    width: 100px;
    height: 35px;
    background-color: #ff5d38;
    color: #FFFFFF;
    border-radius: 2px;
    border:0;
    display: block;
    padding: 8px 12px;
    box-sizing: border-box;
    box-shadow: 0 2px 2px 0 rgba(255,93,56, 0.14), 0 3px 1px -2px rgba(255,93,56, 0.2), 0 1px 5px 0 rgba(255,93,56, 0.12);    
    line-height: 0px;  
    outline: none;  
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
}
.save:hover{
    box-shadow: 0 14px 26px -12px rgba(255,93,56, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(255,93,56, 0.2);
}
.pic-box-bottom{
	width: 125px;
	height: auto;
	display: block;
	float: left;
	position: relative;
	text-align: center;
}
.pic-box-normal{
	width: 80px;
	height: 80px;
	display: block;
	margin-left: auto;
	margin-right: auto;	
	position: relative;
}
.pic-box-normal img{
	width: 80px;
	height: 80px;
	z-index: 1;
	cursor:pointer;
}
.pic-box-active{
	width: 80px;
	height: 80px;
	display: block;
	margin-left: auto;
	margin-right: auto;	
	position: relative;
}
.pic-box-active img{
	width: 80px;
	height: 80px;
	z-index: 1;
	cursor:pointer;
}
.title{
	height: 26px;
    width: 100%;
    background: rgba(0,0,0,0.4);
    position: absolute;
    left: 0;
    bottom: 0;
    font-size: 14px;
    text-align: center;
    line-height: 26px;
    color: #fff;	
    z-index: 2;
    cursor:pointer;
}
</style>
<link rel="stylesheet" href="{MODULE_URL}public/css/Toast.css">
<script src="{MODULE_URL}public/js/Toast.js"></script>  
<link rel="stylesheet" href="{MODULE_URL}template/web/css/miiselectdata.css">
<script src="{MODULE_URL}public/js/miiselect.js?ver={$_W['timestamp']}"></script>
<script type="text/javascript">
		$("#_save").on("click",function(){
			var menuname = $.trim($('#menuname').val());
			var menuurl = $.trim($('#menuurl').val());
			var menuimg = $.trim($('#menuimg').val());
			var menuimgs = $.trim($('#menuimgs').val());
			var font_color = $.trim($('input[name="font_color"]').val());
			var selectfont_color = $.trim($('input[name="selectfont_color"]').val());
			var orderid = $.trim($('#orderid').val());
			if(menuname==''){
				mqToast({type:1,context: '请填写菜单名称'});
				return false;
			}
			if(menuurl==''){
				mqToast({type:1,context: '请选择连接地址'});
				return false;
			}
			if(menuimg==''){
				mqToast({type:1,context: '请上传正常图标'});
				return false;			
			}
			if(menuimgs==''){
				mqToast({type:1,context: '请上传选中图标'});
				return false;				
			}
			if(font_color==''){
				mqToast({type:1,context: '请选择字体颜色'});
				return false;
			}
			if(selectfont_color==''){
				mqToast({type:1,context: '请选择选中颜色'});
				return false;
			}
			$('#_save').addClass('disabled');	
			$.ajax({
				url:"{php echo $this->createWebUrl('save_addbottommenu');}&version_id="+"{$_GPC['version_id']}",
				data:{menuname:menuname,menuurl:menuurl,menuimg:menuimg,menuimgs:menuimgs,font_color:font_color,selectfont_color:selectfont_color,orderid:orderid},
				dataType:"json",
				type:"post",
				success:function(res){
					if(res.status==1){
						mqToast({type:1,context:res.msg});
						  setTimeout(function(){
			                window.location.reload();
			              },2000);
						return false;						
					}else{
						mqToast({type:1,context:res.msg});
						$('#_save').removeClass('disabled');
					}
				}

			})

		});
		function showImageDialogs(elm, opts, options) {
				require(["util"], function(util){
					var btn = $(elm);
					var ipt = $('#menuimg');
					var val = $('#menuimg').val();
					var showImg = $('#showImg');
					var img = ipt.parent().next().children();
					options = {'global':false,'class_extra':'','direct':true,'multiple':false,'fileSizeLimit':5120000};
					util.image(val, function(url){
						if(url.url){
							if(img.length > 0){
								//img.get(0).src = url.url;
								
							}
							ipt.val(url.attachment);
							ipt.attr("filename",url.filename);
							ipt.attr("url",url.url);
							showImg.attr("src",url.url);
						}
						if(url.media_id){
							if(img.length > 0){
								img.get(0).src = "";
							}
							ipt.val(url.media_id);
						}
					}, options);
				});
			}
			function showImageDialogsAndselect(elm, opts, options) {
				require(["util"], function(util){
					var btn = $(elm);
					var ipt = $('#menuimgs');
					var val = $('#menuimgs').val();
					var showImg = $('#showImages');
					var img = ipt.parent().next().children();
					options = {'global':false,'class_extra':'','direct':true,'multiple':false,'fileSizeLimit':5120000};
					util.image(val, function(url){
						if(url.url){
							if(img.length > 0){
								//img.get(0).src = url.url;
								
							}
							ipt.val(url.attachment);
							ipt.attr("filename",url.filename);
							ipt.attr("url",url.url);
							showImg.attr("src",url.url);
						}
						if(url.media_id){
							if(img.length > 0){
								img.get(0).src = "";
							}
							ipt.val(url.media_id);
						}
					}, options);
				});
			}			
		function deleteImage(elm){
			$(elm).prev().attr("src", "./resource/images/nopic.jpg");
			$(elm).parent().prev().find("input").val("");
		}
		function geturl(this_){
			var _this = $(this_);
			var url = _this.attr("data-href");
			$("#menuurl").val(url);
		}
		$("#classselect").on("click",function(){
			var titleValue = $(this).data('title');
			var multipleValue = eval($(this).data('multiple'));
			var maxNumValue = eval($(this).data('maxnum'));
			var widthValue = eval($(this).data('width'));
			var serviceclass=new Array("all,全部分类",{$classArr});
			var htmlJobtag = '';
			if (serviceclass) {
				htmlJobtag += '<div class="modal_body_box modal_body_box4">';
				for (var i = 0; i < serviceclass.length; i++) {
					if (serviceclass[i].split(',')) {
						var iArray = serviceclass[i].split(',');
						htmlJobtag += [
							'<ul class="list_nav">',
								'<li>',
									'<label>',
										'<input class="J_list_jobtag" type="checkbox" data-code="' + iArray[0] + '" data-title="' + iArray[1] + '"> ',
									'' + iArray[1] + '</label>',
								'</li>',
							'</ul>'
						].join('');
					};
				};
				htmlJobtag += '<div class="clear"></div>';
				htmlJobtag += '</div>';
			};

			prepareModal(titleValue, multipleValue, maxNumValue);

			$('.J_modal_content').html(htmlJobtag);
		    $('.J_btnyes').attr('id', 'J_btnyes_jobtag');

			$('.modal_dialog').css({
				width: widthValue + 'px',
		    	left: ($(window).width() - widthValue)/2,
		    	top: ($(window).height() - $('.modal_dialog').outerHeight())/2 + $(document).scrollTop()
		    });

		    $('.modal_backdrop').addClass('in');

		    var recoverValue = $('.classid').val();
			if (recoverValue.length) {
				var recoverValueArray = recoverValue.split(',');
				for (var i = 0; i < recoverValueArray.length; i++) {
					$('.J_list_jobtag').each(function(index, el) {
						if ($(this).data('code') == recoverValueArray[i]) {
							$(this).prop('checked', !0);
						};
					});
				};
			};

			$('.J_list_jobtag').on('click', function() {
				if (multipleValue) {
					var checkedArray = $('.J_list_jobtag:checked');
					if ($(this).is(':checked')) {
						if (checkedArray.length > maxNumValue) {
							alert('最多选择'+ maxNumValue +'个');
							$(this).prop('checked', 0);
							$(this).closest('li').removeClass('current');
							return false;
						};
					} else {
						$('.J_list_jobtag').not(':checked').prop('disabled', 0);
					}
				} else {
					var code = $(this).data('code');
					var title = $(this).data('title');
					$('.classid').val(code);
					$('.tag_code_title').val(title);
					$('.tag_code_title').attr('title', title);
					$('.modal_backdrop').remove();
	 				$('.modala').remove();
				}
			});

			$('#J_btnyes_jobtag').on('click', function(event) {
				var checkedArray = $('.J_list_jobtag:checked');
				var codeArray = new Array();
				var titleArray = new Array();
				$.each(checkedArray, function(index, val) {
					codeArray[index] = $(this).data('code');
					titleArray[index] = $(this).data('title');
				});
				$('#menuurl').val('/mii_ang/pages/service/service?typeid='+codeArray.join(','));
				;
				removeModal();
			});
	        //取消
	        $('.close').on('click', function() {
	            removeModal();
	        });
	        $('.J_btncancel').on('click', function() {
	            removeModal();
	        });		
			
		});
		$("#goodsselect").on("click",function(){
			var titleValue = $(this).data('title');
			var multipleValue = eval($(this).data('multiple'));
			var maxNumValue = eval($(this).data('maxnum'));
			var widthValue = eval($(this).data('width'));
			var goodslist=new Array({$goodsArr});
			var htmlJobtag = '';
			if (goodslist) {
				htmlJobtag += '<div class="modal_body_box modal_body_box4">';
				for (var i = 0; i < goodslist.length; i++) {
					if (goodslist[i].split(',')) {
						var iArray = goodslist[i].split(',');
						htmlJobtag += [
							'<ul class="list_nav">',
								'<li>',
									'<label>',
										'<input class="J_list_jobtag" type="checkbox" data-code="' + iArray[0] + '" data-title="' + iArray[1] + '"> ',
									'' + iArray[1] + '</label>',
								'</li>',
							'</ul>'
						].join('');
					};
				};
				htmlJobtag += '<div class="clear"></div>';
				htmlJobtag += '</div>';
			};

			prepareModal(titleValue, multipleValue, maxNumValue);

			$('.J_modal_content').html(htmlJobtag);
		    $('.J_btnyes').attr('id', 'J_btnyes_jobtag');

			$('.modal_dialog').css({
				width: widthValue + 'px',
		    	left: ($(window).width() - widthValue)/2,
		    	top: ($(window).height() - $('.modal_dialog').outerHeight())/2 + $(document).scrollTop()
		    });

		    $('.modal_backdrop').addClass('in');

		    var recoverValue = $('.classid').val();
			if (recoverValue.length) {
				var recoverValueArray = recoverValue.split(',');
				for (var i = 0; i < recoverValueArray.length; i++) {
					$('.J_list_jobtag').each(function(index, el) {
						if ($(this).data('code') == recoverValueArray[i]) {
							$(this).prop('checked', !0);
						};
					});
				};
			};

			$('.J_list_jobtag').on('click', function() {
				if (multipleValue) {
					var checkedArray = $('.J_list_jobtag:checked');
					if ($(this).is(':checked')) {
						if (checkedArray.length > maxNumValue) {
							alert('最多选择'+ maxNumValue +'个');
							$(this).prop('checked', 0);
							$(this).closest('li').removeClass('current');
							return false;
						};
					} else {
						$('.J_list_jobtag').not(':checked').prop('disabled', 0);
					}
				} else {
					var code = $(this).data('code');
					var title = $(this).data('title');
					$('.classid').val(code);
					$('.tag_code_title').val(title);
					$('.tag_code_title').attr('title', title);
					$('.modal_backdrop').remove();
	 				$('.modala').remove();
				}
			});

			$('#J_btnyes_jobtag').on('click', function(event) {
				var checkedArray = $('.J_list_jobtag:checked');
				var codeArray = new Array();
				var titleArray = new Array();
				$.each(checkedArray, function(index, val) {
					codeArray[index] = $(this).data('code');
					titleArray[index] = $(this).data('title');
				});
				$('#menuurl').val('/mii_ang/pages/detail/detail?gid='+codeArray.join(','));
				;
				removeModal();
			});
	        //取消
	        $('.close').on('click', function() {
	            removeModal();
	        });
	        $('.J_btncancel').on('click', function() {
	            removeModal();
	        });		
			
		});				
</script>

{template 'common/footer'}
